<template>
	<view class="tui-set-box">
		<form @submit="formSubmit" @reset="formReset">
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">申请任务名称</view>
					<input placeholder-class="tui-phcolor" class="tui-input" name="applyName" placeholder="请输入申请任务名称" maxlength="50"
					 type="text" />
				</view>
			</tui-list-cell>

			<view class="tui-mtop">
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">有效期开始时间</view>
						<input placeholder-class="tui-phcolor" :value="effectStart" class="tui-input" name="effectStart" placeholder="请选择有效期开始时间"
						 maxlength="50" type="text" @click="showDatePicker('start')" :disabled="true" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">有效期结束时间</view>
						<input placeholder-class="tui-phcolor" :value="effectEnd" class="tui-input" name="effectEnd" placeholder="请选择有效期结束时间"
						 maxlength="50" type="text" @click="showDatePicker('end')" :disabled="true" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :arrow="true">
					<view class="tui-line-cell">
						<view class="tui-title">请选择网格</view>
						<input placeholder-class="tui-phcolor" :value="fenceName" class="tui-input" name="fenceName" placeholder="请选择网格"
						 maxlength="50" type="text" @click="showFencePopup" :disabled="true" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :arrow="true">
					<view class="tui-line-cell" style="align-items: flex-start;">
						<view class="tui-title">执行人</view>
						<view @click="showPersonPopup" class="tui-flex-box">
							<tui-tag margin="0 10rpx 10rpx 0" type="green" plain v-for="(person,personIndex) in selectedPersonList" :key="personIndex">{{person.personName}}</tui-tag>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">工作地址</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="address" placeholder="请输入工作地址" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
			</view>
			<view class="tui-mtop">
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">申请人联系电话</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="mobile" placeholder="请输入申请人联系电话" maxlength="50"
						 type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">原因</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="reason" placeholder="请输入申请人原因" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">备注</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="remark" placeholder="请输入备注" maxlength="50" type="text" />
					</view>
				</tui-list-cell>
			</view>

			<view class="tui-submit-container">
				<tui-button shape="circle" shadow height="88rpx" formType="submit">提交</tui-button>
			</view>
		</form>
		<!--日期选择-->
		<tui-datetime ref="dateTime" :type="type" :cancelColor="cancelColor" :color="color" :setDateTime="setDateTime"
		 :unitTop="unitTop" :radius="true" @confirm="change"></tui-datetime>
		<!--底部围栏选择层-->
		<tui-bottom-popup :show="popupFenceShow" @close="hideFencePopup">
			<view class="tui-popup-box">

				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<radio-group @change="fenceChange">

							<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in fenceList" :key="index">
								<view class="tui-person-item">
									<label class="tui-checkbox">
										<radio :value="item.value" :checked="item.selected"></radio>
									</label>
									<view>{{item.label}}</view>
								</view>


							</view>
						</radio-group>
					</view>
				</scroll-view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hideFencePopup"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup>
		<!--人员底部选择层-->
		<tui-bottom-popup :show="popupPersonShow" @close="hidePersonPopup">
			<view class="tui-popup-box">

				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<checkbox-group @change="personChange">

							<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in personList" :key="index">
								<view class="tui-person-item">
									<label class="tui-checkbox">
										<checkbox :value="item.personId" :checked="item.selected" color="#fff"></checkbox>
									</label>
									<view>{{item.personName}}</view>
								</view>


							</view>
						</checkbox-group>
					</view>
				</scroll-view>

				<view class="tui-tabbar">
					<view class="tui-checkAll">
						<checkbox-group @change="checkAll">
							<label class="tui-checkbox">
								<checkbox :checked="isAll" color="#fff"></checkbox>
								<text class="tui-checkbox-pl">全选</text>
							</label>
						</checkbox-group>
						<view class="tui-total-count">合计:<text class="tui-bold">{{checkedNum}}人</text> </view>
					</view>
					<view>
						<tui-button width="200rpx" height="70rpx" :size="30" type="green" shape="circle" :plain="true" @click="submitPersons">确定</tui-button>
					</view>
				</view>
				<view class="tui-right">
					<tui-icon name="close-fill" color="#999" :size="20" @click="hidePersonPopup"></tui-icon>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	export default {
		data() {
			return {
				type: 7,
				dateResultType: 'start',
				cancelColor: '#888',
				color: '#5677fc',
				setDateTime: '',
				unitTop: false,
				effectStart: '',
				effectEnd: '',
				popupFenceShow: false,
				popupPersonShow: false,
				isAll: false,
				fenceId: null,
				fenceList: [],
				personIds: [],
				selectedPersonList: [],
				personList: []
			}
		},
		computed: {
			checkedNum() {
				return this.personList.filter(v => v.selected == true).length;
			},
			fenceName() {
				return this.fenceId ? this.fenceList.find(v => v.value == this.fenceId).label : ''
			}
		},
		onShow() {
			this.getFenceCombo()
			this.getPersonCombo()
		},
		methods: {
			getFenceCombo() {
				this.loadding = true;
				this.tui.request("/api/apply/fence/combo", "GET", {}, false, false, true).then(res => {
					res.data.forEach(item => {
						item.selected = false
					})
					this.fenceList = res.data

				})
			},
			getPersonCombo() {
				this.loadding = true;
				this.tui.request("/api/apply/person/combo", "GET", {}, false, false, true).then(res => {
					res.data.forEach(item => {
						item.selected = false
					})
					this.personList = res.data

				})
			},
			showDatePicker(type) {
				this.dateResultType = type
				this.$refs.dateTime.show();
			},
			change: function(e) {
				if (this.dateResultType == 'start') {
					this.effectStart = e.result;
				} else {
					this.effectEnd = e.result
				}

			},
			showFencePopup: function() {
				this.popupFenceShow = true;
			},
			hideFencePopup: function() {
				this.popupFenceShow = false;
			},
			showPersonPopup() {
				this.popupPersonShow = true;
			},
			hidePersonPopup() {
				this.popupPersonShow = false;
			},
			personChange(e) {
				this.personIds = e.detail.value.map(v => {
					return parseInt(v)
				})

				this.personList.map(item => {

					if (this.personIds.indexOf(item.personId) > -1) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})

			},
			checkAll(e) {
				this.isAll = !this.isAll;

				this.personList.map((item) => {
					item.selected = this.isAll;

				})

			},
			submitPersons() {

				this.selectedPersonList = this.personList.filter((item) =>
					item.selected == true
				)
				console.log(this.selectedPersonList)
				this.popupPersonShow = false
			},
			fenceChange(e) {

				this.fenceId = e.detail.value


			},
			formSubmit: function(e) {
				if (this.effectStart >= this.effectEnd) {
					uni.showToast({
						title: '结束时间需要小于开始时间',
						icon: "none"
					});
					return
				}
				if (this.selectedPersonList.length == 0) {
					uni.showToast({
						title: '请选择执行人',
						icon: "none"
					});
					return
				}
				//表单规则
				let rules = [{
					name: "applyName",
					rule: ["required"], //可使用区间，此处主要测试功能
					msg: ["请输入申请名称"]
				}, {
					name: "effectStart",
					rule: ["required"],
					msg: ["请选择有效期开始时间"]
				}, {
					name: "effectEnd",
					rule: ["required", "isNum", "range:[0,150]"],
					msg: ["请选择有效期结束时间"]
				}, {
					name: "fenceName",
					rule: ["required"],
					msg: ["请选择围栏"]
				}]
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					// uni.showToast({
					// 	title: "验证通过!",
					// 	icon: "none"
					// });
					this.doAdd(formData)
				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
				console.log(formData)
			},
			doAdd(formData) {
				this.tui.request("/api/apply/excute/add", "POST", Object.assign(formData, {
					fenceId: this.fenceId,
					excutePersonIds: this.selectedPersonList.map(v => {
							return v.personId;
						})
						.join(","),
					excutePersonName: this.selectedPersonList
						.map(v => {
							return v.personName;
						})
						.join(",")
				}), false, false, true).then(res => {

					uni.navigateBack({
						delta: 1
					});
				})
			},
		}
	}
</script>

<style>
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}

	.tui-submit-container {
		padding: 100rpx 24rpx;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.tui-flex-box {

		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		min-height: 50rpx;
		width: 100%;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 99999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-count {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*人员选择*/
	.tui-person-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #47a447;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	.tui-checkbox .wx-radio-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-radio-input.wx-radio-input-checked {
		background: #47a447;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */

	/*底部选择弹层*/
	.tui-operation-right {
		height: 100rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}



	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
